<template>
    <el-popover placement="bottom-start" trigger="click"
                popper-class="tree-popper"
                :width="treeCheck.width"
                v-model="treeCheck.status">
        <div class="tree-select" :class="{'block': block}" slot="reference" ref="treeCheck"
             @mouseover="treeCheck.hover=true" @mouseout="treeCheck.hover=false">
            <div class="tree-input" :class="Object.assign({'is-focus': treeCheck.status}, sizeClass)">
                <input type="text" readonly="readonly" autocomplete="off" class="tree-input__inner"
                       :placeholder="placeholder || $t('platform.setting.tree.org')" v-model="orgNameString">
                <span class="tree-input__suffix" @click.stop="clearCheckNode">
                    <span class="tree-input__suffix-inner">
                        <i class="tree-select__caret tree-input__icon el-icon-arrow-up"
                           :class="{'is-reverse': treeCheck.status,'el-icon-circle-close': clearable && Boolean(orgNameString) && treeCheck.hover}"></i>
                    </span>
                </span>
            </div>
        </div>
        <el-scrollbar>
            <div class="p-3 text-center" v-if="!orgList.length">
                <component-page-loading :status="orgListStatus" @reload="getOrgs"></component-page-loading>
            </div>
            <div class="p-2" v-else>
                <el-input :placeholder="$t('form.inputPlaceholder')" v-model="filterKeyword" size="small" clearable></el-input>
            </div>
            <div class="pb-2" v-if="orgList.length">
                <el-tree ref="treeOrgCheck"
                         show-checkbox
                         node-key="code"
                         :data="orgList"
                         :props="orgProps"
                         :check-strictly="checkStrictlySwitch"
                         :expand-on-click-node="false"
                         :check-on-click-node="true"
                         :filter-node-method="filterNode">
                </el-tree>
            </div>
        </el-scrollbar>
        <div class="tree-footer">
            <div class="pl-1">
                <el-checkbox v-model="checkStrictlySwitch">{{ $t('components.page.org.check-strictly') }}</el-checkbox>
            </div>
            <div>
                <el-button size="mini" type="text" @click.stop="clearCheckNode">{{ $t('action.clear') }}</el-button>
                <el-button size="mini" @click.stop="confirmCheckNode">{{ $t('action.confirm') }}</el-button>
            </div>
        </div>
    </el-popover>
</template>

<script>
export default {
    name: "PageOrgTreeOptionCheck",
    model: {
        prop: 'orgCodes',
        event: 'change'
    },
    props: {
        orgCodes: {
            type: Array,
            default: () => []
        },
        size: {
            type: String,
            default: null
        },
        clearable: {
            type: Boolean,
            default: true
        },
        checkStrictly: {
            type: Boolean,
            default: false
        },
        block: {
            type: Boolean,
            default: false
        },
        placeholder: String
    },
    data() {
        return {
            checkStrictlySwitch: false,
            filterKeyword: '',
            treeCheck: {
                status: false,
                width: 200,
                hover: false,
            },
            orgListStatus: 'dle',
            orgList: [],
            orgProps: {
                label: 'name',
                children: 'children'
            },
            dataList: [],
            orgNameString: '',
        }
    },
    computed: {
        sizeClass() {
            return {
                'tree-input--medium': this.size == 'medium',
                'tree-input--small': this.size == 'small',
                'tree-input--mini': this.size == 'mini',
            };
        }
    },
    watch: {
        filterKeyword: function (n, o) {
            this.$refs.treeOrgCheck.filter(n);
        },
        // 外部改变当前选中节点
        orgCodes: {
            deep: true,
            handler: function (n, o) {
                this.intCheckNode();
            }
        },
        // 改变当前选中节点，调整popper宽度
        'treeCheck.status': function (n, o) {
            if (!this.treeCheck.status) {
                this.intCheckNode();
            } else {
                this.treeCheck.width = this.$refs.treeCheck.offsetWidth;
            }
        },
    },
    created() {
        // 初始化关联状态
        this.checkStrictlySwitch = this.checkStrictly;
        // 获取树数据
        this.getOrgs();
    },
    methods: {
        filterNode(value, data) {
            if (!value) return true;
            return data.name.search(new RegExp(value, 'i')) !== -1;
        },
        getOrgs() {
            this.orgListStatus = 'loading';
            axios.get('/common/getOrgList').then((response) => {
                if (response.data.resp_msg.code == 200) {
                    this.orgList = response.data.resp_data.treeList;
                    this.orgListStatus = !this.orgList.length ? 'nodata' : 'dle';
                    this.dataList = response.data.resp_data.dataList;
                    // 当前选中节点
                    this.intCheckNode();
                } else {
                    this.orgListStatus = 'error';
                }
            })
        },
        // 当前选中节点
        intCheckNode() {
            if (!this.orgList.length)
                return false;
            this.$nextTick(function () {
                // 设置选中节点
                this.$refs.treeOrgCheck.setCheckedKeys(this.orgCodes);
                // 获取选中节点
                let orgNames = [];
                for (let v of this.$refs.treeOrgCheck.getCheckedNodes()) {
                    orgNames.push(v.name);
                }
                // 显示选中节点
                this.orgNameString = orgNames.join(', ');
            })
        },
        // 确定选中节点
        confirmCheckNode() {
            // 获取选中节点
            let [orgCodes, orgNames] = [[], []];
            for (let v of this.$refs.treeOrgCheck.getCheckedNodes()) {
                orgCodes.push(v.code);
                orgNames.push(v.name);
            }
            // 显示选中节点
            this.orgNameString = orgNames.join(', ');
            // 对外广播事件
            this.$emit('change', orgCodes);
            // 关闭弹窗
            this.treeCheck.status = false;
        },
        // 清空选中节点
        clearCheckNode() {
            if (!this.clearable || !Boolean(this.orgNameString)) {
                // 开关弹窗
                this.treeCheck.status = !this.treeCheck.status;
                // 终止继续
                return false;
            }
            this.orgNameString = '';
            // 树取消选中节点
            this.$refs.treeOrgCheck.setCheckedKeys([]);
            // 对外广播事件
            this.$emit('change', []);
            // 关闭弹窗
            this.treeCheck.status = false;
        }
    },
}
</script>

<style lang="scss" scoped>
::v-deep .el-scrollbar__wrap {
    max-height: 300px;
}

.tree-footer {
    border-top: 1px solid #F2F6FC;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tree-select {
    display: inline-block;
    position: relative;
    outline: none;
}

.tree-select.block {
    display: block;
}

.tree-select .tree-input {
    display: block;
    position: relative;
    font-size: 14px;
    width: 100%;
}

.tree-input__inner {
    display: inline-block;
    appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid $boder-color-first;
    box-sizing: border-box;
    color: $font-color-second;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 30px 0 15px;
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 100%;
    cursor: pointer;
}

.tree-input__inner::placeholder {
    color: $font-color-fourth
}

.tree-select:hover .tree-input__inner {
    border-color: $font-color-fourth;
}

.tree-select .tree-input.is-focus .tree-input__inner {
    border-color: $color-primary;
}

.el-form-item.is-error .tree-input__inner {
    border-color: $color-danger;
}

.tree-input__suffix {
    position: absolute;
    top: 0;
    right: 5px;
    transition: all .3s;
    height: 100%;
    color: $font-color-fourth;
    text-align: center;
    pointer-events: none;
}

.tree-input__suffix-inner {
    pointer-events: all;
}

.tree-input__icon {
    height: 100%;
    width: 25px;
    text-align: center;
    transition: all .3s;
    line-height: 40px;
}

.tree-select .tree-input .tree-select__caret {
    color: $font-color-fourth;
    font-size: 14px;
    transition: transform .3s;
    transform: rotateZ(180deg);
    cursor: pointer;
}

.tree-select .tree-input .tree-select__caret.is-reverse {
    transform: rotateZ(0);
}

.tree-select .tree-input .tree-select__caret.el-icon-circle-close:hover:before {
    color: $font-color-third
}

.tree-input__icon:after {
    content: '';
    height: 100%;
    width: 0;
    display: inline-block;
    vertical-align: middle;
}

.tree-input--medium {
    font-size: 14px
}

.tree-input--medium .tree-input__inner {
    height: 36px;
    line-height: 36px
}

.tree-input--medium .tree-input__icon {
    line-height: 36px
}

.tree-input--small {
    font-size: 13px
}

.tree-input--small .tree-input__inner {
    height: 32px;
    line-height: 32px
}

.tree-input--small .tree-input__icon {
    line-height: 32px
}

.tree-input--mini {
    font-size: 12px
}

.tree-input--mini .tree-input__inner {
    height: 28px;
    line-height: 28px
}

.tree-input--mini .tree-input__icon {
    line-height: 28px
}

.org-tree-node {
    display: flex;
    flex-direction: row;
    flex: auto;
    align-items: center;
    font-size: $font-size-third;
    padding-right: 15px;
}

.org-tree-node .node-info {
    flex: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.org-tree-node .node-icon {
    color: #c7daf1;
}
</style>
